<template>
  <div class="app-container">
    <outbound-panel :datas="panelData" />
    <div class="box">
      <el-row class="row1">
        <el-col :span="12">
          <span class="titles">出库物料统计（公斤 / 千克）</span>
        </el-col>
        <el-col :span="12" align="right">
          <el-date-picker
            v-model="datetime"
            align="right"
            type="date"
            placeholder="选择查询日期"
            size="mini"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @blur="changeDate"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row v-loading="loading">
        <bar-chart :chart-data="barChartData" />
      </el-row>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
import { getChukuStats } from '@/api/stats'
import { BarChart, OutboundPanel } from '@/components'
export default {
  name: 'outbound',
  components: {
    BarChart,
    OutboundPanel
  },
  data() {
    return {
      panelData: {
        outbound_wait: '',
        outbound_finish: '',
        order_sale: '',
        max_order_sale_material: ''
      },
      loading: true,
      barChartData: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      datetime: formatDate(new Date(), 'yyyy-MM-dd')
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getChukuStats(this.datetime)
        .then((res) => {
          this.loading = false
          console.log(res)
          this.barChartData = res.data.outbound_material_list
        })
        .catch((err) => {
          this.loading = false
          console.log(err)
        })
    },
    changeDate() {
      this.fetchData()
      console.log(this.barChartData)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.box {
  padding: 20px 10px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
}
.row1 {
  background: #fff;
  padding: 16px 36px 0;
}
.titles {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 14px;
  margin-bottom: 12px;
  //   font-weight: 600;
}
</style>
